import {offset} from './config'
import {getAngle} from '../../utils'

export default {
  bind(el, binding) {

    const stop = binding.modifiers.stop || false
    const prevent = binding.modifiers.prevent || false
    const scrollLock = binding.modifiers.scrollLock || false
    const defaultXLock = binding.modifiers.xLock && false
    const defaultYLock = binding.modifiers.yLock && false

    let xLock = defaultXLock
    let yLock = defaultYLock

    let moveCount = 0

    const callback = binding.value

    const getPosition = function() {
      let translate = el.style.transform.split('translate')[1]
      if(!translate)
        return {
          x: 0,
          y: 0
        }
      translate = translate.slice(0, translate.indexOf(')'))
      translate = translate.replace(/(\()|( )|(px)/g, '').split(',')
      return {
        x: parseInt(translate[0]),
        y: parseInt(translate[1]),
      }
    }

    const position = {}
    const start = {}

    el.addEventListener('touchmove', function(event) {

      if(stop)
        event.stopPropagation()
      if(prevent)
        event.preventDefault()

      if(event.changedTouches.length > 1){
        return
      }

      const touch = event.changedTouches[0]
      const pageX = touch.pageX
      const pageY = touch.pageY

      if(moveCount < offset){
        if(moveCount === 0){
          Object.assign(position, getPosition())
          Object.assign(start, {
            x: pageX,
            y: pageY
          })
        }

        if(scrollLock !== false){
          event.stopPropagation()
          event.preventDefault()
        }

        return moveCount ++
      }else if(moveCount === offset){
        if(scrollLock !== false){
          const angle = getAngle(start.x, start.y, pageX, pageY)
          if(
            (angle >= 0 && angle < 45) ||
            (angle > 135 && angle < 215) ||
            (angle > 315)
          )
            xLock = false
          else
            yLock = false

        }

        moveCount ++

        Object.assign(start, {
          x: pageX,
          y: pageY,
        })

      }

      let x = xLock === false ? position.x : pageX - start.x + position.x
      let y = yLock === false ? position.y : pageY - start.y + position.y

      if(callback && typeof callback === 'function'){
        // console.log(position.x)
        const dir = [
          pageX > start.x ? 'right' : 'left',
          pageY > start.y ? 'bottom' : 'top',
        ]
        const returnPosition = callback({el, x, y, dir, e: event, type: 'drag'})
        if(returnPosition && typeof returnPosition.x === 'number'){
          start.x = pageX
          x = returnPosition.x
          if(xLock !== false)
            position.x = returnPosition.x
        }
        if(returnPosition && typeof returnPosition.y === 'number'){
          start.y = pageY
          y = returnPosition.y
          if(yLock !== false)
            position.y = returnPosition.y
        }

      }

      el.style.transform = `translate(${x}px,${y}px)`

    }, false)


    el.addEventListener('touchend', event => {

      if(stop)
        event.stopPropagation()
      if(prevent)
        event.preventDefault()

      moveCount = 0
      const touch = event.changedTouches[0]
      Object.assign(position, {
        x: xLock === false ? position.x : touch.pageX - start.x + position.x,
        y: yLock === false ? position.y : touch.pageY - start.y + position.y
      })
      if(scrollLock){
        xLock = defaultXLock
        yLock = defaultYLock
      }
    }, false)

  }
}
